<template>
  <section class="p-5 mb-5 bg-white">
    <el-form
      ref="queryForm"
      label-width="120px"
      class="flex flex-wrap"
      :model="query"
    >
      <el-form-item
        class="w-2/12"
        prop="logisticsCode"
      >
        <el-input
          v-model.trim="query.logisticsCode"
          placeholder="code"
        />
      </el-form-item>
      <el-form-item
        class="w-2/12"
        prop="logisticsNameCn"
      >
        <el-input
          v-model.trim="query.logisticsNameCn"
          placeholder="快递公司名称"
        />
      </el-form-item>
      <el-form-item
        class="w-2/12"
        prop="source"
      >
        <el-select
          v-model.trim="query.source"
          placeholder="来源"
          clearable
        >
          <el-option
            v-for="item in ['TRACK718', 'TRACK51', 'AFTERSHIP']"
            :key="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        class="w-2/12"
        prop="enable"
      >
        <el-select
          v-model.trim="query.enable"
          placeholder="是否启用"
          clearable
        >
          <el-option
            v-for="(item, index) in isEnable"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="handleQuery({ num: 1 })"
        >
          查询
        </el-button>
        <el-button @click="handleReset">
          重置
        </el-button>
        <SettingModal>
          <el-button
            type="primary"
            class="left10"
          >
            新增
          </el-button>
        </SettingModal>
      </el-form-item>
    </el-form>
  </section>
  <section>
    <el-table
      :data="data.records"
      border
    >
      <el-table-column
        label="是否启用"
        width="80px"
        prop="enable"
      >
        <template #default="{ row }">
          <span
            class="enable"
            :class="{'not':!row.enable}"
          >{{ row.enable ? '启用' : '不启用' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="企点快递code"
        show-overflow-tooltip
        width="150px"
        prop="logisticsCode"
      />
      <el-table-column
        label="快递公司中文名"
        show-overflow-tooltip
        width="150px"
        prop="logisticsNameCn"
      />
      <el-table-column
        label="快递公司英文名"
        show-overflow-tooltip
        width="150px"
        prop="logisticsNameEn"
      />
      <el-table-column
        label="718快递公司代码"
        show-overflow-tooltip
        width="150px"
        prop="track718Code"
      />
      <el-table-column
        label="51快递公司代码"
        show-overflow-tooltip
        width="150px"
        prop="track51Code"
      />
      <el-table-column
        label="after ship快递公司代码"
        show-overflow-tooltip
        width="200px"
        prop="afterShipCode"
      />
      <el-table-column
        label="快递公司官网"
        show-overflow-tooltip
        width="250px"
        prop="website"
      />
      <el-table-column
        label="快递公司电话"
        show-overflow-tooltip
        width="150px"
        prop="telephone"
      />
      <el-table-column
        label="快递公司LOGO"
        show-overflow-tooltip
        width="150px"
        prop="logo"
      >
        <template #default="{ row }">
          <el-image
            class="logo"
            :src="row.logo"
          >
            <div slot="error">
              暂无
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="常用权重"
        width="80px"
        prop="usedWeight"
      />
      <el-table-column
        label="创建时间"
        show-overflow-tooltip
        width="200px"
        prop="createTime"
      />
      <el-table-column
        label="创建人"
        show-overflow-tooltip
        width="150px"
        prop="createBy"
      />
      <el-table-column
        label="数据来源"
        show-overflow-tooltip
        width="150px"
        prop="source"
      />
      <el-table-column
        label="中台快递code"
        show-overflow-tooltip
        width="150px"
        prop="yunlspCode"
      />
      <el-table-column
        label="操作"
        fixed="right"
        width="80px"
      >
        <template #default="{ row }">
          <SettingModal :value="row">
            <el-button type="text">
              编辑
            </el-button>
          </SettingModal>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center py-4">
      <el-pagination
        v-model:current-page="query.num"
        background
        :total="data.total"
        @current-change="handleQuery"
      />
    </div>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    components: {
        SettingModal: () => import('./components/SettingModal')
    },
    data() {
        return {
            query: {
                num: 1,
                logisticsCode: ''
            },
            isEnable: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '启用',
                    value: true
                },
                {
                    label: '不启用',
                    value: false
                }
            ]
        }
    },
    computed: {
        ...mapGetters({
            data: 'express/data'
        })
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.handleQuery()
        },
        handleQuery(query = {}) {
            this.query = { ...this.query, ...query }
            this.$nextTick(() =>
                this.$store.dispatch('express/list', { ...this.query })
            )
        },
        handleReset() {
            this.$refs.queryForm.resetFields()
            this.query.num = 1
            this.handleQuery()
        }
    }
}
</script>
<style scoped>
  .left10 {
    margin-left: 10px;
  }
  ::v-deep .el-form-item--medium .el-form-item__content {
    margin-left: 20px !important;
  }
  .logo {
    width: 30px;
    height: 30px;
  }
  .enable {
    color: #13ce66;
    font-weight: bold;
  }
  .enable.not {
    color: #ff4949;
  }
</style>
